<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">    
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
		    .appLeft{
		    	display: inline-block;
		    	float: left;
		    	width: 200px;
		    	line-height:65px;
		    	height: 100%;
		    }
		    body{
		    	background: #272727;
		    	height: 100%;
		    }
		    #box{
		    	height: 100%;
			    -webkit-user-select:none;
			     -moz-user-select:none;
			     -ms-user-select:none;
			     user-select:none;
		    }
		    html{
		    	height: 100%;
		    }
		    .head{
		    	height: 60px;
		    	width: 100%;
		    	line-height:60px;
		    	text-align: center;
		    	color: white;
		    	background: black;
		    }
		    .appLeft{
		    	border-right: 1px solid lightcoral;
		    }
		    .appLeft ul li{
		    	background: #3B444F;
		    	color: #999999;
		    }
		    .appLeft ul li ul{
		    	/*display: none;*/
		    }
		    .appLeft ul li ul li{
		    	background: #2C3643;
		    	color: white;
		    	cursor: pointer;
		    	
		    }
		    .appLeft ul li ul li ul{
		    	/*display: none;*/
		    }
		    .appLeft ul li ul li ul li{
		    	background: #232B35;
		    	color: lightcoral;
		    	cursor: pointer;
		    }
		    .cf::after{
		    	content: "";
		    	display: block;
		    	clear: both;
		    }
		    .right{
		    	background: #272727;
		    	overflow: hidden;
		    	height: 100%;
		    	position: relative;
		    }
		    .mod{
		    	display: inline-block;
		    	width: 100px;
		    	height: 100px;
		    	background: white;
		    	position: absolute;
		    }
		    .trash{
		    	display: inline-block;
		    	position: absolute;
		    	bottom: 5%;
			    right: 5%;
			    transform: scale(0.5);
			    

		    }
	    </style>  
	</head>
	<body>
		<div id="box">
			<div class="head">
				我是头部
			</div>
			<div class="appLeft cf">
				<ul>
					<li class="one">
						一级1
						<ul>
							<li class="two">二级1-1
								<ul>
									<li class="three" draggable="true" ondragstart="dragLi(event)">三级1-1-1</li>
								</ul>
							</li>
							<li class="two">二级1-2
								<ul>
									<li class="three">三级1-2-1</li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="one"> 
						一级2
						<ul>
							<li class="two">二级2-1
								<ul>
									<li class="three">三级2-1-1</li>
									<li class="three">三级2-1-2</li>
								</ul>
							</li>
							<li class="two">二级2-2
								<ul>
									<li class="three">三级2-2-1</li>
									<li class="three">三级2-2-2</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
	    	</div>
	    	
	    	<div class="right cf" ondragover="allowDrop(event)" ondrop="dropLi(event)">
	    		<div class="trash">
	    			<img draggable="false" src="img/trash.png"/>
	    		</div>
	    	</div>
		</div>
		
    	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		
    		$(document).ready(function(){
    			$(".one").on("click",function(){
					$(this).children("ul").slideToggle()
    			})
    			
    			$(".two").on("click",function(event){
    				//关掉事件冒泡
    				event.stopPropagation();
    				$(this).children("ul").slideToggle()
    			})
    			$(".three").attr("draggable","true")
    			$(".three").attr("ondragstart","dragLi(event)")
    			$(".three").on("click",function(event){
    				event.stopPropagation();
    			})
    			
    		})
    			
    			
    		function dragLi(ev){
    			ev.dataTransfer.setData("Text",ev.target.innerText);
    			console.log(ev)
//			    
    		}
    		
    		function dropLi(event){
    			event.preventDefault();
    			var data=event.dataTransfer.getData("Text");
    			console.log(data)
    			var e = event || window.event;
			    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
			    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
			    var x = e.pageX-250 || e.clientX + scrollX-250;
			    var y = e.pageY-100 || e.clientY + scrollY-100;
			    //alert('x: ' + x + '\ny: ' + y);
			    console.log(x,y);
			    
			    var model = document.createElement("div");
			    
			   $(model).addClass("imdiv")
			   
			    $(".right").append(model);
			    $(model).css({"position":"absolute","left":x,"top":y,"display":"inline-block","width":"100px","height":"100px","background":"white","text-align":"center","line-height":"100px"})
			    $(model).html(data);
			    
    		}
    	
    		function allowDrop(ev){
				//不执行默认处理（拒绝被拖放）
				ev.preventDefault();
			};
			
		
			$(function(){
			  $(".right").on('mousedown','.imdiv',function(e){
			    var positionDiv = $(this).offset();
			    var x2 = $(this).css("left");
			    var y2 = $(this).css("top");
			    console.log(x2,y2)
			    console.log(positionDiv);
			    var distenceX = e.pageX - positionDiv.left+200;
			    var distenceY = e.pageY - positionDiv.top+50;
			    console.log(distenceX,distenceY);
			    var that = this;
			    $(document).mousemove(function(e){
			      x2 = e.pageX - distenceX;
			      y2 = e.pageY - distenceY;
//			      $(that).css({"left":x2,"top":y2});
			      console.log(x2,y2)

			      if(x2<0){
			        x2=0;
			        console.log("ggg")
			      }else if(x2>$(document).width()-200-$('.imdiv').outerWidth(true)){
			        x2 = $(document).width()-200-$('.imdiv').outerWidth(true);
			      }
			      if(y2<0){
			        y2=0;
			      }else if(y2>$(document).height()-$('.imdiv').outerHeight(true)){
			        y2 = $(document).height()-$('.imdiv').outerHeight(true);
			      }
			      $(that).css({"left":x2+"px","top":y2+"px"});
			      
			    });
			    $(document).mouseup(function(){
			      $(document).off('mousemove');
			    });
			  });
			});

			

			

			
    	</script>
	</body>
</html>
